<template>
  <v-app>
    <div class="d-flex flex-col gap-col-16">
      <div v-for="category in Object.keys(icons)" :key="category" class="category d-flex flex-col gap-col-16">
        <div class="title">{{ category }}</div>
        <div class="grid">
          <div v-for="icon in icons[category]" :key="`icon-${icon}`" class="d-flex flex-col gap-col-8 justify-center">
            <div class="d-flex justify-center align-center">
              <Icon :name="icon" shadow size="50"></Icon>
            </div>
            <div class="text-center text-white">{{ icon }}</div>
          </div>
        </div>
      </div>
    </div>
  </v-app>
</template>
<script setup>
import { iconMap } from '@/constant/icon-map'

const icons = Object.entries(iconMap).reduce((acc, [key, value]) => {
  const [category] = value.slice(1).split('/')
  if (!acc[category]) {
    acc[category] = []
  }
  acc[category].push(key)
  return acc
}, {})

console.log('icons', icons)
</script>
<style scoped lang="scss">
.category {
  width: 75%;
  padding: 1rem;
  border-bottom: 0.2rem dashed rgb(var(--v-theme-primary));

  .title {
    font-size: 2rem;
    text-align: center;
    color: rgb(var(--v-theme-primary));
  }
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 2rem;
}
</style>
